<template>
  <!-- 联合巡检：巡检报告 -->
  <div class="inspection-report-h bigTableStyle">
    <div class="inspection-report-index">
      <div class="fromed">
        <el-form ref="elForm" :model="formData" :rules="rules" label-width="1.4rem">
          <el-row :gutter="15">
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="所属单位:" prop="time">
                    <el-select
                      v-model="formData.cities"
                      placeholder="请选择所属地市"
                      :style="{width: '100%'}"
                    >
                      <el-option
                        v-for="(item, index) in citiesOptions"
                        :key="index"
                        :label="item.interval"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="维护班组:" prop>
                    <el-select
                      v-model="formData.substation"
                      placeholder="请选择下拉变电站"
                      :style="{width: '100%'}"
                    >
                      <el-option
                        v-for="(item, index) in substationOptions"
                        :key="index"
                        :label="item.interval"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="变电站:" prop="source">
                    <el-select v-model="formData.vg" placeholder="请选择电压等级" :style="{width: '100%'}">
                      <el-option
                        v-for="(item, index) in vgOptions"
                        :key="index"
                        :label="item.interval"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="设备名称:" prop="point">
                    <el-input
                      v-model="formData.point"
                      placeholder="请输入巡检点位"
                      :style="{width: '100%'}"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="发现方式:" prop="area">
                    <el-select
                      v-model="formData.area"
                      placeholder="请选择巡检区域"
                      :style="{width: '100%'}"
                    >
                      <el-option
                        v-for="(item, index) in areaOptions"
                        :key="index"
                        :label="item.interval"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="缺陷类型:" prop="unit">
                    <el-select
                      v-model="formData.unit"
                      placeholder="请选择间隔单元"
                      :style="{width: '100%'}"
                    >
                      <el-option
                        v-for="(item, index) in unitOptions"
                        :key="index"
                        :label="item.interval"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="是否消缺:" prop="identify">
                    <el-select
                      v-model="formData.identify"
                      placeholder="请选择识别结论"
                      :style="{width: '100%'}"
                    >
                      <el-option
                        v-for="(item, index) in identifyOptions"
                        :key="index"
                        :label="item.interval"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="发现时间:" prop="source">
                    <el-date-picker
                      :style="{width: '100%'}"
                      v-model="formData.strtimeedntime"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="计划消缺时间:" prop="source">
                    <el-date-picker
                      :style="{width: '100%'}"
                      v-model="formData.strtimeedntime"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <div class="inspection-report-index-btn">
                <el-button
                  class="table-query"
                  type="primary"
                  @click="submitForm"
                  icon="el-icon-search"
                >查询</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="tableed">
        <el-table
        border
          :data="tableData"
          height="100%"
          :row-class-name="tableRowClassName"
          style="width: 100%;height:100%;"
        >
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="name" label="缺陷编号"></el-table-column>
          <el-table-column prop="address" label="所属单位"></el-table-column>
          <el-table-column prop="address" label="维护班组"></el-table-column>
          <el-table-column prop="address" label="变电站名称"></el-table-column>
          <el-table-column prop="address" label="设备名称"></el-table-column>
          <el-table-column prop="address" label="设备类型" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="address" label="电压等级"></el-table-column>
          <el-table-column prop="address" label="发现方式"></el-table-column>
          <el-table-column prop="address" label="缺陷类型"></el-table-column>
          <el-table-column prop="address" label="缺陷状态"></el-table-column>
          <el-table-column prop="address" label="缺陷描述"></el-table-column>
          <el-table-column prop="address" label="计划消缺时间"></el-table-column>
        </el-table>
      </div>
      <div class="paged elPaginationStyle">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages.pageSize"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages.totalSize"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
// import lines from "./components/line.vue";
@Component({ components: {} })
export default class inspectionReportIndex extends Vue {
  //搜索框from表单数据
  formData = {
    cities: 1, //所属地市
    substation: 1, //变电站名称
    vg: 1, //电压等级
    area: 1, //巡检区域
    unit: 1, //间隔单元
    point: 1, //巡检点位
    strtimeedntime: 1, //巡检时间
    identify: 1, //识别结论
    tcap: 1, //是否处理
  };
  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
  };
  citiesOptions = [
    {
      interval: "山东省国网公司",
      id: 1,
    },
  ];
  substationOptions = [
    {
      interval: "110kVxxx地变电站",
      id: 1,
    },
  ];
  vgOptions = [
    {
      interval: "110Kv",
      id: 1,
    },
  ];
  areaOptions = [
    {
      interval: "xxxxxx区域",
      id: 1,
    },
  ];
  unitOptions = [
    {
      interval: "单元一",
      id: 1,
    },
  ];
  identifyOptions = [
    {
      interval: "异常",
      id: 1,
    },
    {
      interval: "正常",
      id: 2,
    },
  ];
  tcapOptions = [
    {
      interval: "是",
      id: 1,
    },
    {
      interval: "否",
      id: 2,
    },
  ];
  pickerOptions = {
    shortcuts: [
      {
        text: "最近一周",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近一个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近三个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit("pick", [start, end]);
        },
      },
    ],
  };
  $refs!: {
    elForm: any;
  };

  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;
      // TODO 提交表单
      // console.log(this.formData);
    });
  }
  resetForm() {
    this.$refs.elForm.resetFields();
  }

  //table表格相关事件数据
  verifyOption = [
    {
      interval: "已核实",
      id: 1,
    },
    {
      interval: "未核实",
      id: 2,
    },
    {
      interval: "误报",
      id: 3,
    },
  ];
  tableData = [
    {
      date: "1",
      name: "xxxxxxxxx",
      address: "xxxxxxxxxxx",
      verify: 2,
    },
  ];
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  verify(scope: any) {
    // console.log(scope.row);
  }
  handleEdit(scope: any) {
    // console.log(scope.row);
    this.dialogVisible = true;
  }

  //分页数据事件相关
  pages = {
    pageSize: 20,
    page: 5,
    totalSize: 120,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.$emit("setPageIndex", val);
  }

  //弹窗相关
  dialogVisible = false;
  dialogTitle = "历史异常告警信息统计";
  handleClose() {
    this.dialogVisible = false;
  }
  mounted() {
    for (let index = 0; index < 20; index++) {
      this.tableData.push({
        date: "1",
        name: "xxxxxxxxx",
        address: "xxxxxxxxxxx",
        verify: 2,
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.inspection-report-h {
  width: 100%;
  height: 100%;
  // padding: 0.24rem;
  .inspection-report-index {
    width: 100%;
    height: 100%;
    &-btn {
      display: flex;
      justify-content: flex-end;
    }
    .fromed {
      height: 120px;
    }
    .tableed {
      height: calc(100% - 180px);
    }
    .paged {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .iconfont {
    cursor: pointer;
  }
}
</style>
<style lang="scss" scoped>
.table-query {
  width: 1.4rem;
}
</style>



